<template>
    <div class="main" tabindex="-1" @keydown="keyOper($event)">
        <el-dialog
            title="提示"
            :visible.sync="freezeDialogVisible"
            width="30%"
            center>
            <span>您的账号已被冻结，如不是您本人操作，您的账号验证码可能存在泄露问题，请尽快确认。</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="logout()">确 定</el-button>
            </span>
        </el-dialog>
        <div class="main-inner">
            <sider-left @initSocket="init"></sider-left>
            <div class="content-view">
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
    </div>
</template>
<script>
    import { baseApi } from '@/api'
    import siderLeft from '@/components/sider-left/index'
    import groupNotifyImg from '../../assets/group_icon.png'
    import utils from '@/utils/common'
    import scrollIntoView from '@/utils/scroll-into-view'
    export default {
        data() {
            return {
                freezeDialogVisible: false,
                groupid: '',
                groupAvatarData: '',
                friendIndex: -1,
                groupIndexOwn: -1,
                groupIndexJoin: -1
            }
        },
        computed: {
            userInfo() {
                return this.$store.state.base.userInfo
            },
            chatList() {
                return this.$store.state.chat.chatList
            },
            friendList() {
                let friendObj = this.$store.state.base.friendList
                let friendList = []
                for (let key in friendObj) {
                    friendList = friendList.concat(friendObj[key])
                }
                return friendList
            },
            groupList() {
                return this.$store.state.base.groupList
            }
        },
        components: {
            siderLeft
        },
        methods: {
            keyOper(event) {
                if (event.target.className == 'main') {
                    let currentTab = this.$store.state.chat.currentTab
                    let currentGroupTab = this.$store.state.chat.currentGroupTab
                    // down arrow key
                    if (event.keyCode == 40) {
                        if (currentTab == 'friend') {
                            this._setCurrFriend('down')
                        } else if (currentTab == 'group') {
                            if (currentGroupTab == 'myself') {
                                this._setCurrGroup('down', 'myself')
                            } else {
                                this._setCurrGroup('down', 'join')
                            }
                        } else if (currentTab == 'message') {
                            this._setCurrChat('down')
                        }
                        event.preventDefault()
                        // up arrow key
                    } else if (event.keyCode == 38) {
                        if (currentTab == 'friend') {
                            this._setCurrFriend('up')
                        } else if (currentTab == 'group') {
                            if (currentGroupTab == 'myself') {
                                this._setCurrGroup('up', 'myself')
                            } else {
                                this._setCurrGroup('up', 'join')
                            }
                        } else if (currentTab == 'message') {
                            this._setCurrChat('up')
                        }
                        event.preventDefault()
                    } else if (event.keyCode == 13) {
                        // enter chat
                        if (currentTab == 'friend') {
                            this._chooseFriend()
                        } else if (currentTab == 'group') {
                            this._chooseGroup()
                        }
                    }
                }
            },
            _setCurrChat(direction) {
                let chatList = this.$store.state.chat.chatList
                let currentChatId = this.$store.state.chat.currentChatId
                if (direction == 'down') {
                    let currChatIndex = chatList.findIndex((el) => {
                        return el.id == currentChatId
                    })
                    if (currChatIndex == chatList.length - 1) {
                        return
                    }
                    currChatIndex++
                    this.$store.dispatch('setCurrentChat', chatList[currChatIndex].id)
                    let target = document.getElementById(chatList[currChatIndex].id + '_id')
                    let container = document.querySelector('.chat-list').parentNode.parentNode
                    scrollIntoView(container, target)
                    // group type reset subGroup
                    if (chatList[currChatIndex].msgType == 13) {
                        this._resetSubGroup(chatList[currChatIndex].id)
                    }
                } else {
                    let currChatIndex = chatList.findIndex((el) => {
                        return el.id == currentChatId
                    })
                    if (currChatIndex == 0) {
                        return
                    }
                    currChatIndex--
                    this.$store.dispatch('setCurrentChat', chatList[currChatIndex].id)
                    let target = document.getElementById(chatList[currChatIndex].id + '_id')
                    let container = document.querySelector('.chat-list').parentNode.parentNode
                    scrollIntoView(container, target)
                    // group type reset subGroup
                    if (chatList[currChatIndex].msgType == 13) {
                        this._resetSubGroup(chatList[currChatIndex].id)
                    }
                }
            },
            _resetSubGroup(id) {
                baseApi.getGroupSubs({ group_id: id }).then(res => {
                    if (res.code == 200) {
                        this.$store.dispatch('setCrrentGroupSubs', res.data)
                    } else {
                        // this.$socket.close()
                        this.$confirm('您的授权已失效，请重新登录！', '提示', {
                            confirmButtonText: '知道了',
                            showClose: false,
                            showCancelButton: false,
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            type: 'warning'
                        }).then(() => {
                            sessionStorage.removeItem('key')
                            this.$store.dispatch('resetBase')
                            this.$store.dispatch('resetChat')
                            this.$router.push({ path: '/login' })
                            // window.location.href = window.location.protocol + '//' + window.location.host + '/login'
                        })
                    }
                })
            },
            _setCurrFriend(direction) {
                let friendObj = this.$store.state.base.friendList
                let friendList = []
                let currentUser = this.$store.state.base.currentUser
                if (friendObj) {
                    for (let key in friendObj) {
                        let value = friendObj[key]
                        friendList = friendList.concat(value)
                    }
                }
                if (friendList.length > 0) {
                    let index
                    if (currentUser) {
                        index = friendList.findIndex((el) => {
                            return el.id == currentUser.id
                        })
                        if (index != -1) {
                            if (direction == 'down') {
                                if (index < friendList.length - 1) {
                                    index++
                                    currentUser = friendList[index]
                                } else {
                                    return
                                }
                            } else {
                                if (index > 0) {
                                    index--
                                    currentUser = friendList[index]
                                } else {
                                    return
                                }
                            }
                        } else {
                            index = 0
                            currentUser = friendList[0]
                        }
                    } else {
                        currentUser = friendList[0]
                    }
                    this.$store.dispatch('setCurrentUser', currentUser)
                    let target = document.getElementById('firend_' + friendList[index].id)
                    let container = document.querySelector('.friend-list').parentNode.parentNode
                    scrollIntoView(container, target)
                }
            },
            _setCurrGroup(direction, type) {
                let groupList = this.$store.state.base.groupList
                if (type == 'myself') {
                    groupList = groupList.filter((el) => {
                        return el.owner == this.userInfo.id
                    })
                } else {
                    groupList = groupList.filter((el) => {
                        return el.owner != this.userInfo.id
                    })
                }
                let currentGroup = this.$store.state.base.currentGroup
                if (groupList.length > 0) {
                    let index
                    if (currentGroup) {
                        index = groupList.findIndex((el) => {
                            return el.id == currentGroup.id
                        })
                        if (index != -1) {
                            if (direction == 'down') {
                                if (index < groupList.length - 1) {
                                    index++
                                    currentGroup = groupList[index]
                                } else {
                                    return
                                }
                            } else {
                                if (index > 0) {
                                    index--
                                    currentGroup = groupList[index]
                                } else {
                                    return
                                }
                            }
                        } else {
                            index = 0
                            currentGroup = groupList[0]
                        }
                    } else {
                        currentGroup = groupList[0]
                    }
                    this.$store.dispatch('setCurrentGroup', currentGroup)
                    let target = document.getElementById('group_' + groupList[index].id)
                    if (type == 'join') {
                        target = document.getElementById('groupjoin_' + groupList[index].id)
                    }
                    let container = document.querySelector('.group-list-' + type).parentNode.parentNode.parentNode
                    scrollIntoView(container, target)
                }
            },
            _chooseFriend() {
                let user = this.$store.state.base.currentUser
                let params = {
                    id: user.id,
                    icon: user.usericon,
                    name: user.remark !== '' ? user.remark : user.nickname,
                    time: '',
                    count: 0,
                    msgType: 11,
                    msgData: [],
                    mute: user.mute
                }

                let inputObj = {
                    content: '',
                    atUserList: [],
                    type: 'friend',
                    id: user.id
                }
                this.$store.dispatch('insertChatInput', inputObj)
                this.$store.dispatch('createChat', params)
                this.$router.push({ path: '/message' })
            },
            _chooseGroup() {
                let group = this.$store.state.base.currentGroup
                baseApi.getGroupSubs({ group_id: group.id }).then(res => {
                    if (res.code == 200) {
                        this.$store.dispatch('setCrrentGroupSubs', res.data)
                        let params = {
                            id: group.id,
                            icon: group.group_icon,
                            name: group.group_name,
                            time: '',
                            count: 0,
                            status: group.status,
                            msgType: 13,
                            msgData: [],
                            mute: group.mute
                        }
                        let inputObj = {
                            content: '',
                            atUserList: [],
                            type: 'group',
                            id: group.id
                        }
                        this.$store.dispatch('insertChatInput', inputObj)
                        this.$store.dispatch('createChat', params)
                        this.$router.push({ path: '/message' })
                    } else {
                        // this.$socket.close()
                        this.$confirm('您的授权已失效，请重新登录！', '提示', {
                            confirmButtonText: '知道了',
                            showClose: false,
                            showCancelButton: false,
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            type: 'warning'
                        }).then(() => {
                            sessionStorage.removeItem('key')
                            this.$store.dispatch('resetBase')
                            this.$store.dispatch('resetChat')
                            this.$router.push({ path: '/login' })
                            // window.location.href = window.location.protocol + '//' + window.location.host + '/login'
                        })
                    }
                })
            },
            drawGroupNotifyImg(callback) {
                var that = this
                var canvas = document.createElement('CANVAS')
                var ctx = canvas.getContext('2d')
                canvas.height = 150
                canvas.width = 150
                ctx.fillStyle = '#cccccc'
                ctx.fillRect(0, 0, 150, 150)
                var loadImg = function (url) {
                    return new Promise(function (resolve, reject) {
                        var img = new Image()
                        img.setAttribute('crossOrigin', 'anonymous')
                        // img.src = `https://webshort.mostonetech.com/download?url=${url}&compress=1`
                        img.src = `${url}?x-oss-process=image/resize,h_40&vt=${utils.getTimestamp()}`
                        img.onload = function () {
                            resolve(img)
                        }
                        img.onerror = function () {
                            // console.error('load groupAvatar fail')
                            // resolve('error')
                        }
                    })
                }
                let groupList = this.$store.state.base.groupList
                let group = groupList.filter((el) => {
                    return el.id == this.groupid
                })
                if (group.length > 0) {
                    let nineps = group[0].nineps
                    if (group[0].group_icon) {
                        Promise.all([
                            loadImg(group[0].group_icon)
                        ]).then(function (res) {
                            if (res.length == 1) {
                                ctx.drawImage(res[0], 4, 4, 142, 142)
                                var dataURL = canvas.toDataURL()
                                that.groupAvatarData = dataURL
                                callback()
                            }
                        })
                    } else {
                        let len = nineps.length
                        switch (len) {
                            case 1:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 1) {
                                        ctx.drawImage(res[0], 4, 4, 142, 142)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 2:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 2) {
                                        ctx.drawImage(res[0], 4, 40.5, 69, 69)
                                        ctx.drawImage(res[0], 77, 40.5, 69, 69)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 3:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 3) {
                                        ctx.drawImage(res[0], 40.5, 4, 69, 69)
                                        ctx.drawImage(res[1], 4, 77, 69, 69)
                                        ctx.drawImage(res[2], 77, 77, 69, 69)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 4:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon),
                                    loadImg(nineps[3].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 4) {
                                        ctx.drawImage(res[0], 4, 4, 69, 69)
                                        ctx.drawImage(res[1], 77, 4, 69, 69)
                                        ctx.drawImage(res[2], 4, 77, 69, 69)
                                        ctx.drawImage(res[3], 77, 77, 69, 69)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 5:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon),
                                    loadImg(nineps[3].oriIcon),
                                    loadImg(nineps[4].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 5) {
                                        ctx.drawImage(res[0], 26.67, 26.67, 47.33, 47.33)
                                        ctx.drawImage(res[1], 76, 26.67, 47.33, 47.33)
                                        ctx.drawImage(res[2], 2, 76, 47.33, 47.33)
                                        ctx.drawImage(res[3], 51.33, 76, 47.33, 47.33)
                                        ctx.drawImage(res[4], 100.66, 76, 47.33, 47.33)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 6:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon),
                                    loadImg(nineps[3].oriIcon),
                                    loadImg(nineps[4].oriIcon),
                                    loadImg(nineps[5].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 6) {
                                        ctx.drawImage(res[0], 2, 26.67, 47.33, 47.33)
                                        ctx.drawImage(res[1], 51.33, 26.67, 47.33, 47.33)
                                        ctx.drawImage(res[2], 100.66, 26.67, 47.33, 47.33)
                                        ctx.drawImage(res[3], 2, 76, 47.33, 47.33)
                                        ctx.drawImage(res[4], 51.33, 76, 47.33, 47.33)
                                        ctx.drawImage(res[5], 100.66, 76, 47.33, 47.33)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 7:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon),
                                    loadImg(nineps[3].oriIcon),
                                    loadImg(nineps[4].oriIcon),
                                    loadImg(nineps[5].oriIcon),
                                    loadImg(nineps[6].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 7) {
                                        ctx.drawImage(res[0], 52.335, 2, 47.33, 47.33)
                                        ctx.drawImage(res[1], 2, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[2], 51.33, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[3], 100.66, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[4], 2, 100.66, 47.33, 47.33)
                                        ctx.drawImage(res[5], 51.33, 100.66, 47.33, 47.33)
                                        ctx.drawImage(res[6], 100.66, 100.66, 47.33, 47.33)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 8:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon),
                                    loadImg(nineps[3].oriIcon),
                                    loadImg(nineps[4].oriIcon),
                                    loadImg(nineps[5].oriIcon),
                                    loadImg(nineps[6].oriIcon),
                                    loadImg(nineps[7].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 8) {
                                        ctx.drawImage(res[0], 26.67, 2, 47.33, 47.33)
                                        ctx.drawImage(res[1], 76, 2, 47.33, 47.33)
                                        ctx.drawImage(res[2], 2, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[3], 51.33, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[4], 100.66, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[5], 2, 100.66, 47.33, 47.33)
                                        ctx.drawImage(res[6], 51.33, 100.66, 47.33, 47.33)
                                        ctx.drawImage(res[7], 100.66, 100.66, 47.33, 47.33)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            case 9:
                                Promise.all([
                                    loadImg(nineps[0].oriIcon),
                                    loadImg(nineps[1].oriIcon),
                                    loadImg(nineps[2].oriIcon),
                                    loadImg(nineps[3].oriIcon),
                                    loadImg(nineps[4].oriIcon),
                                    loadImg(nineps[5].oriIcon),
                                    loadImg(nineps[6].oriIcon),
                                    loadImg(nineps[7].oriIcon),
                                    loadImg(nineps[8].oriIcon)
                                ]).then(function (res) {
                                    if (res.length == 9) {
                                        ctx.drawImage(res[0], 2, 2, 47.33, 47.33)
                                        ctx.drawImage(res[1], 51.33, 2, 47.33, 47.33)
                                        ctx.drawImage(res[2], 100.66, 2, 47.33, 47.33)
                                        ctx.drawImage(res[3], 2, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[4], 51.33, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[5], 100.66, 51.33, 47.33, 47.33)
                                        ctx.drawImage(res[6], 2, 100.66, 47.33, 47.33)
                                        ctx.drawImage(res[7], 51.33, 100.66, 47.33, 47.33)
                                        ctx.drawImage(res[8], 100.66, 100.66, 47.33, 47.33)
                                        var dataURL = canvas.toDataURL()
                                        that.groupAvatarData = dataURL
                                        callback()
                                    }
                                })
                                break
                            default:
                                break
                        }
                    }
                }
            },
            logout() {
                this.freezeDialogVisible = false
                this.$socket.close()
                sessionStorage.removeItem('key')
                this.$store.dispatch('resetBase')
                this.$store.dispatch('resetChat')
                this.$router.push({ path: '/login' })
            },
            _notification(type, userObj, data) {
                var that = this
                if (data.contentType != 1021 && data.contentType != 1022 && data.contentType != 1018 && data.contentType != 1007 && data.contentType != 1004 && data.contentType != 1012) {
                    return
                }
                if (data.own == 1 || (data.senderid == this.userInfo.id)) {
                    return
                }
                if (userObj && userObj.length > 0) {
                    userObj = userObj[0]
                }

                let noticeElm = document.getElementById('notice')
                if (userObj.mute == 0 && data && !data.own && (data.senderid != this.userInfo.id)) {
                    noticeElm.play()
                }
                // 消息免打扰
                if (userObj.mute == 1) {
                    return
                }

                // 消息免打扰,但是@自己或@所有人要通知
                let isAtSelf = false
                if (userObj.mute == 2 && type == 'group') {
                    // at message
                    if (data.contentType == 1007) {
                        let msg = JSON.parse(data.msg)
                        if (msg.memberId == '') {
                            isAtSelf = true
                        } else {
                            let memberIds = msg.memberId.split(',')
                            isAtSelf = memberIds.includes(this.userInfo.id)
                        }
                    }
                    // answer at message
                    if (data.contentType == 1012) {
                        let msg = JSON.parse(data.msg)
                        if (msg.ct == 1007) {
                            if (msg.mid == '') {
                                isAtSelf = true
                            } else {
                                let mids = msg.mid.split(',')
                                isAtSelf = mids.includes(this.userInfo.id)
                            }
                        }
                    }
                    if (!isAtSelf) {
                        return
                    }
                }
                var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null
                let title = ''
                let content = ''
                let msg = JSON.parse(data.msg)
                // file
                if (data.contentType == 1018) {
                    content = '[文件]'
                    // pic
                } else if (data.contentType == 1022) {
                    content = '[图片]'
                    // video
                } else if (data.contentTYpe == 1004) {
                    content = '[视频]'
                } else {
                    content = msg.content
                }
                if (type == 'group') {
                    title = userObj.group_name
                } else {
                    title = userObj.nickname
                }
                // 用户是否关闭了通知
                let notice = true
                let noticeStatus = localStorage.getItem('noticeStatus')
                if (noticeStatus && noticeStatus == 1) {
                    notice = false
                }
                if (window.Notification) {
                    if (window.Notification.permission == 'granted' && notice && (document[hiddenProperty] || (!document[hiddenProperty] && window.pageType == 'blur'))) {
                        var notification = null
                        let eventBind = function() {
                            notification.onshow = function () {
                                setTimeout(notification.close.bind(notification), 10000)
                            }

                            notification.onclick = function() {
                                that.$router.push({ name: 'message' })
                                if (type == 'group') {
                                    baseApi.getGroupSubs({ group_id: data.groupid }).then(res => {
                                        if (res.code == 200) {
                                            that.$store.dispatch('setCrrentGroupSubs', res.data)
                                        } else {
                                            // this.$socket.close()
                                            that.$confirm('您的授权已失效，请重新登录！', '提示', {
                                                confirmButtonText: '知道了',
                                                showClose: false,
                                                showCancelButton: false,
                                                closeOnClickModal: false,
                                                closeOnPressEscape: false,
                                                type: 'warning'
                                            }).then(() => {
                                                sessionStorage.removeItem('key')
                                                that.$store.dispatch('resetBase')
                                                that.$store.dispatch('resetChat')
                                                that.$router.push({ path: '/login' })
                                                // window.location.href = window.location.protocol + '//' + window.location.host + '/login'
                                            })
                                        }
                                    })
                                }
                                that.$store.dispatch('setCurrentChat', userObj.id)
                                window.focus()
                                setTimeout(notification.close.bind(notification), 100)
                            }
                        }
                        if (type == 'group') {
                            this.groupid = data.groupid
                            this.drawGroupNotifyImg(function() {
                                notification = new Notification(title, {
                                    body: content,
                                    icon: that.groupAvatarData ? that.groupAvatarData : groupNotifyImg
                                })
                                eventBind()
                            })
                        } else {
                            notification = new Notification(title, {
                                body: content,
                                icon: userObj.usericon
                            })
                            eventBind()
                        }
                    } else {
                        window.Notification.requestPermission()
                        if (document[hiddenProperty]) {
                            var titleMsg = '默往网页版【您有新的消息】'
                            var speed = 300
                            var msgud = ' ' + titleMsg
                            var titleScroll = function() {
                                if (msgud.length < titleMsg.length) msgud += ' - ' + titleMsg
                                msgud = msgud.substring(1, msgud.length)
                                document.title = msgud.substring(0, titleMsg.length)
                            }
                            if (window.newsInterval) {
                                clearInterval(window.newsInterval)
                            }
                            window.newsInterval = setInterval(titleScroll, speed)
                        }
                    }
                }
            },
            init() {
                this.$socket.init(message => {
                    let msg = JSON.parse(message)
                    if (msg.open) {
                        this.$store.dispatch('changeOnlineStatus', true)
                        this.$store.dispatch('changeReconnectStatus', false)
                    }
                    if (!msg.msgType && !msg.open) {
                        let msgData = msg
                        if (!msg.group_id) {
                            msg = {
                                msgType: 11,
                                data: msgData
                            }
                        }
                    }
                    if (msg.msgType == 11) {
                        // lahei or delete by friend
                        if (msg.code == 313) {
                            this.$store.dispatch('savePersonMessage', msg.data)
                            return
                        }
                        let filterObjs = this.friendList.filter(el => { return el.id == msg.data.senderid })
                        let index = utils.chartListFilter(msg.data.senderid, this.chatList)
                        if (index == -1) {
                            if (filterObjs.length == 0) {
                                baseApi.getFriendInfo({ user_id: msg.data.senderid }).then(res => {
                                    if (res.code == 200) {
                                        this.$store.dispatch('insertFriend', res.data)
                                        let fObj = res.data
                                        for (let key in fObj) {
                                            let obj = fObj[key][0]
                                            let params = {
                                                id: obj.id,
                                                icon: obj.usericon,
                                                name: obj.remark !== '' ? obj.remark : obj.nickname,
                                                time: '',
                                                count: 0,
                                                msgType: 11,
                                                msgData: [],
                                                mute: obj.mute
                                            }
                                            let inputObj = {
                                                content: '',
                                                atUserList: [],
                                                type: 'friend',
                                                id: msg.data.senderid
                                            }
                                            this.$store.dispatch('insertChatInput', inputObj)
                                            this.$store.dispatch('insertChat', params)
                                            this.$store.dispatch('savePersonMessage', msg.data)
                                            this._notification('friend', obj, msg.data)
                                        }
                                    } else {
                                        // this.$socket.close()
                                        this.$confirm('您的授权已失效，请重新登录！', '提示', {
                                            confirmButtonText: '知道了',
                                            showClose: false,
                                            showCancelButton: false,
                                            closeOnClickModal: false,
                                            closeOnPressEscape: false,
                                            type: 'warning'
                                        }).then(() => {
                                            sessionStorage.removeItem('key')
                                            this.$store.dispatch('resetBase')
                                            this.$store.dispatch('resetChat')
                                            this.$router.push({ path: '/login' })
                                        })
                                    }
                                })
                            } else {
                                let filterObj = filterObjs[0]
                                let params = {
                                    id: filterObj.id,
                                    icon: filterObj.usericon,
                                    name: filterObj.remark !== '' ? filterObj.remark : filterObj.nickname,
                                    time: '',
                                    count: 0,
                                    msgType: 11,
                                    msgData: [],
                                    mute: filterObj.mute
                                }
                                let inputObj = {
                                    content: '',
                                    atUserList: [],
                                    type: 'friend',
                                    id: msg.data.senderid
                                }
                                this.$store.dispatch('insertChatInput', inputObj)
                                this.$store.dispatch('insertChat', params)
                                this.$store.dispatch('savePersonMessage', msg.data)
                                this._notification('friend', filterObj, msg.data)
                            }
                        } else {
                            this.$store.dispatch('savePersonMessage', msg.data)
                            this._notification('friend', filterObjs[0], msg.data)
                        }
                    }
                    if (msg.msgType == 13) {
                        // filter sys msg
                        if (msg.data.contentType == 1000) {
                            return
                        }
                        let filter = this.groupList.filter(el => { return el.id == msg.data.groupid })
                        let index = utils.chartListFilter(msg.data.groupid, this.chatList)
                        if (index == -1) {
                            let params = {}
                            if (filter.length == 0) {
                                baseApi.getGroupInfo({ group_id: msg.data.groupid }).then(res => {
                                    if (res.code == 200) {
                                        this.$store.dispatch('insertGroup', res.data)
                                        let params = {
                                            id: res.data.id,
                                            icon: res.data.group_icon,
                                            name: res.data.group_name,
                                            time: '',
                                            count: 0,
                                            status: res.data.status,
                                            msgType: 13,
                                            msgData: [],
                                            mute: res.data.mute
                                        }
                                        let inputObj = {
                                            content: '',
                                            atUserList: [],
                                            type: 'group',
                                            id: msg.data.groupid
                                        }
                                        this.$store.dispatch('insertChatInput', inputObj)
                                        this.$store.dispatch('insertChat', params)
                                        msg.data.userid = this.userInfo.id
                                        this.$store.dispatch('saveGroupMessage', msg.data)
                                        let filter1 = this.groupList.filter(el => { return el.id == msg.data.groupid })
                                        this._notification('group', filter1, msg.data)
                                    } else {
                                        // this.$socket.close()
                                        this.$confirm('您的授权已失效，请重新登录！', '提示', {
                                            confirmButtonText: '知道了',
                                            showClose: false,
                                            showCancelButton: false,
                                            closeOnClickModal: false,
                                            closeOnPressEscape: false,
                                            type: 'warning'
                                        }).then(() => {
                                            sessionStorage.removeItem('key')
                                            this.$store.dispatch('resetBase')
                                            this.$store.dispatch('resetChat')
                                            this.$router.push({ path: '/login' })
                                        })
                                    }
                                })
                            } else {
                                let params = {
                                    id: filter[0].id,
                                    icon: filter[0].group_icon,
                                    name: filter[0].group_name,
                                    time: '',
                                    count: 0,
                                    status: filter[0].status,
                                    msgType: 13,
                                    msgData: [],
                                    mute: filter[0].mute
                                }
                                let inputObj = {
                                    content: '',
                                    atUserList: [],
                                    type: 'group',
                                    id: msg.data.groupid
                                }
                                this.$store.dispatch('insertChatInput', inputObj)
                                this.$store.dispatch('insertChat', params)
                                msg.data.userid = this.userInfo.id
                                this.$store.dispatch('saveGroupMessage', msg.data)
                                this._notification('group', filter, msg.data)
                            }
                        } else {
                            msg.data.userid = this.userInfo.id
                            this.$store.dispatch('saveGroupMessage', msg.data)
                            this._notification('group', filter, msg.data)
                        }
                    }
                    // freeze account
                    if (msg.msgType == 10920) {
                        this.freezeDialogVisible = true
                    }

                    // remove groups
                    if (msg.msgType == 89) {
                        let groupid = msg.data.groupid
                        let userid = this.userInfo.id + ''
                        if (msg.data.idname.includes(userid)) {
                            let groupStaObj = {
                                isRemove: true,
                                groupid: groupid
                            }
                            this.$store.dispatch('updateGroupStatus', groupStaObj)
                        }
                    }

                    // enter groups
                    if (msg.msgType == 90) {
                        let groupid = msg.data.groupid
                        let userid = this.userInfo.id + ''
                        if (msg.data.idname.includes(userid)) {
                            let groupStaObj = {
                                isRemove: false,
                                groupid: groupid
                            }
                            this.$store.dispatch('updateGroupStatus', groupStaObj)
                        }
                    }
                    if (msg.msgType == 10919) {
                        this.$confirm('您的帐号已在另外一台手机登录，请退出重新登录？', '提示', {
                            confirmButtonText: '确 定',
                            showClose: false,
                            showCancelButton: false,
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            type: 'warning'
                        }).then(() => {
                            this.$socket.close()
                            sessionStorage.removeItem('key')
                            this.$store.dispatch('resetBase')
                            this.$store.dispatch('resetChat')
                            this.$router.push({ path: '/login' })
                        })
                    }
                    if (msg.msgType == 17) {
                        if (msg.data.contentType == 111) {
                            this.$store.dispatch('setChatStatus', {
                                id: msg.data.groupid,
                                status: 1
                            })
                            this.$store.dispatch('setGroupStatus', {
                                id: msg.data.groupid,
                                status: 1
                            })
                        }
                        if (msg.data.contentType == 112) {
                            this.$store.dispatch('setChatStatus', {
                                id: msg.data.groupid,
                                status: 2
                            })
                            this.$store.dispatch('setGroupStatus', {
                                id: msg.data.groupid,
                                status: 2
                            })
                        }
                    }
                }, error => {
                    if (error.code == 423 || error.code == 424 || error.code == 428) {
                        this.$socket.close()
                        sessionStorage.removeItem('key')
                        this.$store.dispatch('resetBase')
                        this.$store.dispatch('resetChat')
                        this.$confirm(error.msg, '提示', {
                            confirmButtonText: '知道了',
                            showClose: false,
                            showCancelButton: false,
                            closeOnClickModal: false,
                            closeOnPressEscape: false,
                            type: 'warning'
                        }).then(() => {
                            this.$router.push({ path: '/login' })
                        })
                    } else if (error.code == 480) {
                        this.$store.dispatch('changeOnlineStatus', false)
                        this.$store.dispatch('changeReconnectStatus', false)
                        // this.init()
                    }
                })
            }
        },
        mounted() {
            document.querySelector('.main-inner').focus()
            window.addEventListener('focus',function () {
                window.pageType = 'focus'
                if (document.title != '默往网页版') {
                    if (window.newsInterval) {
                        clearInterval(window.newsInterval)
                        document.title = '默往网页版'
                    }
                }
            })

            window.addEventListener('blur',function () {
                window.pageType = 'blur'
            })
            window.onbeforeunload = function() {
                return ''
            }
            this.init()
        }
    }
</script>
